<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="password"><span></span><br>
    重复密码：<input type="text" id="password2"><span></span><br>
    手机号：<input type="text" id="tel"><span></span><br>
    邮箱：<input type="text" id="email"><span></span><br>
    <input type="button" id="send" value="验证">
</body>
<script>
//     1.用户名           用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
    // 2.密码的规则        数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
    // 3.重复密码            跟第一次输入 密码一致
    // 4.手机号的验证      第一位必须为1，后面再加10位数字
    // 5.邮箱                数字大小写字母_- 3到12位   @  数字字母 2到9位  . 字母2到5位
    // 6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳

    // 用户名
    var ousername=document.getElementById("username")
    ousername.oninput = function(){
        if(/^[\u2e80-\u9fff\w\-]{4,20}$/.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            userFlag = true;
        }else{
            this.nextElementSibling.innerHTML = "no ok";
            userFlag = false;
        }
    }

    // 密码规则     数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
    var opassword=document.getElementById("password");
    opassword.oninput=function(){
        var a=b=c=0;
        if(/\d/g.test(this.value)){
            a = 1;
        }
        if(/[a-z]/gi.test(this.value)){
            b = 1;
        }
        if(/[^\da-z]/gi.test(this.value)){
            c = 1;
        }
        var all=a+b+c;
        switch(all){
            case 1:this.nextElementSibling.innerHTML = "弱";break;
            case 2:this.nextElementSibling.innerHTML = "中";break;
            case 3:this.nextElementSibling.innerHTML = "强";break;
        }
    }

    // 重复密码：
    var opassword2=document.getElementById("password2");
    opassword2.onblur=function(){
        if(opassword2.value===opassword.value){
            this.nextElementSibling.innerHTML="密码一致"
            passwordFlag=true;
        }else{
            this.nextElementSibling.innerHTML="密码不一致"
            passwordFlag=false;

        }
    }

    // 4.手机号的验证      第一位必须为1，后面再加10位数字
    var otel=document.getElementById("tel");
    otel.oninput=function(){
        if(/^1[3-9]\d{9}$/.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            telFlag = true
        }else{
            this.nextElementSibling.innerHTML = "no ok";
            telFlag = false
        }
    }

    // 邮箱：数字大小写字母_- 3到12位   @  数字字母 2到9位  . 字母2到5位
    var oemail=document.getElementById("email");
    oemail.onblur = function(){
        if(/^[\da-z]{2,6}@[a-z\d]{2,6}\.[a-z]{2,5}$/.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            emailFlag = true
        }else{
            this.nextElementSibling.innerHTML = "no ok";
            emailFlag = false
        }
    }
</script>
</html>